<head>
	<style type="text/css" media="screen">@import "../jqt/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "../jqt/theme.css";</style>
	<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../jqt/jqtouch.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch();
	var cgiPath = '/~mkrieger/cgi-bin/';
	
	var friendsApp = {};
	
	function getLocation() {
		if(navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function(position){
				handlePosition(position);
			});
		} else {
			// fake it
			window.setTimeout(function(){
				var position = {'coords': {'latitude':37.73145, 'longitude':-122.42155}};
				handlePosition(position);
			}, 1000);
		}
	}
	
	function handlePosition(position) {
		var yourStatus = prompt("Enter your status:");
		var statusLI = $(".status", "#checkin");
		statusLI.html("Located!");
		$("<li>Status: " + yourStatus + "</li>").insertAfter(statusLI);
		$("<li>Latitude: " + position.coords.latitude + "</li>").appendTo(statusLI.parent())
		$("<li>Longitude: " + position.coords.longitude + "</li>").appendTo(statusLI.parent())
		$.post(cgiPath + 'checkin.php', {
			latitude: position.coords.latitude,
			longitude: position.coords.longitude,
			username: friendsApp['username'],
			status: yourStatus
		}, function(response){
			$("<li>Checkin completed!</li>").appendTo(statusLI.parent());
		})
	}
	
	
	$(document).ready(function(){
		
		var username = window.localStorage.getItem("username");
		
		if (!username) {
			username = window.prompt("Your name?");
			window.localStorage.setItem("username", username);
		}
		
		friendsApp['username'] = username;		
		
		$("#checkin").bind("pageAnimationEnd", function(event, info){
			if (info.direction != "in") return;
			getLocation();
		})
	});
</script>
</head>
<body>
	<div id="home" class="current">
		<div class="toolbar">
			<h1>FriendLocate</h1>
		</div>
		<ul id="mainmenu">
			<li><a href="#checkin">Check In</a></li>
			<li><a href="#nearby">Nearby People</a></li>
			<li><a href="#friends">My Friends</a></li>
		</ul>
	</div>
	<div id="checkin">
		<div class="toolbar">
			<h1>Check In</h1>
		</div>		
		<ul>
			<li class="status">Locating...</li>
		</ul>
	</div>
	
</body>
